<template>
  <div class="app-container">
    <el-container>
      <el-aside width="200px">
        <el-tree
          ref="treeDom"
          highlight-current
          default-expand-all
          icon-class="el-icon-folder-add"
          :data="treeDataList"
          :props="{ label: 'name' }"
          node-key="id"
          :current-node-key="'1024985257948084801'"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </el-aside>
      <el-container>
        <el-header><h3>作业范围</h3>
          <div class="buttons">
            <el-row v-if="edit">
              <el-button
                type="danger"
                @click="edit = false"
              >编辑</el-button>
            </el-row>
            <el-row v-else>
              <el-button
                type="danger"
                @click="submit"
              >提交</el-button>
              <el-button @click="edit = true,isDrwa = true">取消</el-button>
            </el-row>
          </div>
        </el-header>
        <el-main>
          地区关键字: <el-input v-model="keyword" placeholder="请输入内容" style="width:200px;margin-bottom:15px" />
          <div v-if="!edit" class="buttons">
            <el-row v-if="isDrwa"> <el-button type="danger" @click="isDrwa = false;editstate = true">开始绘制</el-button></el-row>
            <el-row v-else> <el-button type="danger" @click="editstate = false;isDrwa = true">完成绘制</el-button> <el-button @click="editstate = false">删除围栏</el-button></el-row></div>
          <el-alert
            v-if="!edit"
            title="点击或拖动鼠标绘制作业范围，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。每个机构仅可支持绘制一个作业范围"
            type="warning"
            show-icon
            :closable="false"
          />
          <baidu-map
            class="bm-view"
            :center="center"
            :zoom="zoom"
            :scroll-wheel-zoom="true"
            @ready="handler"
          >
            <bm-local-search :keyword="keyword" :auto-viewport="true" />
            <bm-polygon
              :path="polygonPath"
              stroke-color="#e15536"
              fill-color="#e15536"
              :fill-opacity="0.3"
              :stroke-opacity="0.4"
              stroke-style="dashed"
              :stroke-weight="2"
              :editing="editstate"
              @lineupdate="updatePolygonPath"
            />
          </baidu-map>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getDepartTree, workarea, saveArea } from '@/api/base'
import { transListToTreeData } from '@/utils'
export default {
  components: {

  },
  data() {
    return {
      treeDataList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      edit: true,
      isDrwa: true,

      // 地图数据
      center: { lng: 116.412732, lat: 39.911707 },
      zoom: 9,
      keyword: '',
      // 多边形编辑数据
      polygonPath: [

      ],
      // 提交时保存的作业范围
      workDate: {},
      // 处理后台返回的经纬度
      newArr: [],
      // 编辑的状态
      editstate: false,
      // map实例对象
      map: {}

    }
  },
  async created() {
    const res = await getDepartTree()
    this.treeDataList = transListToTreeData(JSON.parse(res), '0')
    console.log(this.treeDataList)
    this.$nextTick(() => {
      this.$refs.treeDom.getCurrentNode()
      this.handleNodeClick(this.$refs.treeDom.getCurrentNode())
    })
  },
  mounted() {

  },
  methods: {
    // 点击节点
    async  handleNodeClick(data) {
      console.log(data)
      this.center.lng = data.longitude
      this.center.lat = data.latitude
      // 在此处获取作业范围
      const res = await workarea(data.id)
      // 机构作业范围数据
      this.workDate = res
      // console.log(this.workDate)
      // console.log(this.polygonPath)
      if (this.workDate.polygon) {
        this.newArr = this.workDate.polygon.map(item => {
          return { lng: item.longitude, lat: item.latitude }
        })
        this.polygonPath = this.newArr
        console.log(this.newArr)
        const viewPointInfo = this.map && this.map.getViewport(this.newArr)
        this.center.lng = viewPointInfo.center.lng
        this.center.lat = viewPointInfo.center.lat
        this.zoom = viewPointInfo.zoom
      } else {
        this.polygonPath = []
      }

      // console.log(this.newArr)
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.map = map
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath()
      console.log(e.target.getPath())
      this.workDate.polygon = e.target.getPath().map(item => {
        return { latitude: item.lat, longitude: item.lng }
      })
      console.log(this.workDate.polygon)
    },
    // addPolygonPoint() {
    //   this.polygonPath.push({ lng: 116.404, lat: 39.915 })
    // },
    // 提交编辑后的作业范围
    async  submit() {
      console.log(this.workDate)
      await saveArea({ bid: this.workDate.bid, type: this.workDate.type, polygon: this.workDate.polygon })
      this.$message.success('保存成功')
      this.editstate = false
      this.edit = true
      this.workDate = {}
    }
  }

}

</script>

<style lang="scss" scoped>

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  background-color: #fff;
  margin-left: 20px;
}
.el-main {
  background-color: #fff;
  margin-left: 20px;
}
.buttons {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.el-alert {
  margin-bottom: 10px;
}
::v-deep .el-aside  {
  height: 909px;
  background-color: #fff;
}
::v-deep .el-tree-node__content {
  height: 40px;

}
::v-deep .el-tree-node__label {
  font-size: 14px;
}.el-tree--highlight-current {
  height: 909px;
}
::v-deep .el-icon-folder-add {
  color: rgb(16, 103, 209);
}
.bm-view {
  width: 100%;
  height: 100vh;
}
</style>>

